<template>
	<view class="fistView">
		<view class="headView">
			<view class="imageView">
				<u-avatar src="../../../static/images/天安门.jpg" size="60"></u-avatar>
			</view>
			<view class="wenziView">
				<view>JackWang</view>
				<view>15890201389</view>
			</view>
		</view>
		<view class="card">
			<uni-card class="fistCardView" :is-shadow="false">
				<view class="cardView">
					<view class="leftView">
						<image src="../../../static/images/优惠卷-copy.png" mode=""></image>
						<view>我的优惠卷</view>
					</view>
					<view class="rightView">
						<view>3张</view>
						<image src="../../../static/images/右箭头.png" mode=""></image>
					</view>
				</view>
			</uni-card>


			<uni-card class="fistCardView" :is-shadow="false">
				<view class="cardView" style="border-bottom: 5rpx #eeeeee solid ;">
					<view class="leftView">
						<view>我的订单</view>
					</view>
					<navigator url="/pages/jackwang/wodedingdan/wodedingdan">
						<view class="rightView">
							<view>全部订单</view>
							<image src="../../../static/images/右箭头.png" mode=""></image>
						</view>
					</navigator>
				</view>

				<view class="zhifuView">
					<u-grid :border="false">
						<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
							<button class="btn"
								:style="{ backgroundColor: baseListItem.color}">{{baseListItem.name}}</button>
						</u-grid-item>
					</u-grid>
				</view>
			</uni-card>

			<uni-card class="fistCardView" :is-shadow="false">
				<view class="cardView" style="border-bottom: 5rpx #eeeeee solid ;">
					<view class="leftView">
						<view>我的服务</view>
					</view>
				</view>

				<view class="zhifuView">
					<u-grid :border="false" col="4">
						<u-grid-item v-for="(baseListItem,baseListIndex) in fuwuList" :key="baseListIndex">
							<image class="img" :src="baseListItem.name"></image>
							<text class="grid-text">{{baseListItem.title}}</text>
						</u-grid-item>
					</u-grid>
				</view>
			</uni-card>
		</view>


		<view class="u-page__button-item">
			<u-button style="height: 80rpx; border-radius: 40rpx;" text="提交" size="normal"
				color="rgb(10, 185, 156)"></u-button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				//支付三大图标
				baseList: [{
						color: '#278EEF',
						name: '待支付',
					},
					{
						color: '#ff7500',
						name: '待使用',

					},
					{
						color: '#2ED9F5',
						name: '待评价',

					},
				],

				//服务图标
				fuwuList: [{
						name: '../../../static/images/优惠卷-copy.png',
						title: '领券中心'
					},
					{
						name: '../../../static/images/邀请好友.png',
						title: '邀请好友'
					},
					{
						name: '../../../static/images/车辆信息.png',
						title: '我的车辆'
					},
					{
						name: '../../../static/images/消费.png',
						title: '消费记录'
					},
					{
						name: '../../../static/images/维修店.png',
						title: '我的维修'
					},
					{
						name: '../../../static/images/意见反馈.png',
						title: '意见反馈'
					},
					{
						name: '../../../static/images/收货地址.png',
						title: '收货地址'
					}
				]

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.headView {
		height: 300rpx;
		background-color: #ff7500;
		display: flex;
		flex-wrap: wrap;
	}

	.headView .imageView {
		/* background-color: red; */
		width: 750rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.headView .wenziView {
		display: flex;
		justify-content: center;
		/* background-color: rebeccapurple; */
		width: 750rpx;
	}

	.headView .wenziView view:first-child {
		font-size: 33rpx;
		color: white;
		margin-right: 20rpx;
	}

	.headView .wenziView view:nth-child(2) {
		font-size: 30rpx;
		color: white;
	}

	.card {
		margin-top: -70rpx;
	}

	.fistCardView {
		border-radius: 30rpx;

	}

	.fistCardView .cardView {
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.fistCardView .leftView {
		display: flex;
		align-items: center;

	}

	.fistCardView .leftView image {
		width: 50rpx;
		height: 50rpx;
		margin-right: 10rpx;
		/* background-color: rebeccapurple; */
	}

	.fistCardView .leftView view {
		color: black;
		font-size: 28rpx;
	}

	.fistCardView .rightView {
		/* background-color: rebeccapurple; */
		display: flex;
		align-items: center;
	}

	.fistCardView .rightView image {
		width: 35rpx;
		height: 35rpx;
		margin-left: 5rpx;
	}

	.fistCardView .rightView view {
		color: black;
		font-size: 28rpx;
	}

	.zhifuView {
		margin: 30rpx 0;
	}

	.zhifuView .btn {
		width: 170rpx;
		color: white;
		font-size: 34rpx;
	}

	.zhifuView .img {
		width: 120rpx;
		height: 100rpx;
	}
	

	.u-page__button-item {

		margin: 80rpx auto;
		width: 500rpx;
	}
</style>